<template>
  <div class="article">
    sec文件
    <div class="article-header">
      <div class="left">
        <el-input
          style="width: 300px"
          v-model="artcieTitle"
          placeholder="请输入内容"
          clearable
          @change="titleChange"
        ></el-input>
      </div>

      <!-- <div class="header" @click="addMet">新增</div> -->
    </div>

    <a-table
      :columns="columns"
      :data-source="dataSource"
      @change="handleTableChange"
      :pagination="pagination"
      :rowKey="(dataSource) => dataSource.newId"
    >
      <template slot="name" slot-scope="scope">
        <div class="table-title">
          {{ scope.description }}
        </div>
      </template>

      <template slot="type" slot-scope="scope">
        <div class="table-title">
          {{ scope.filingType }}
        </div>
      </template>

      <template slot="time" slot-scope="scope">
        <div class="table-title">
          {{ scope.filingDate }}
        </div>
      </template>

      <template slot="operation" slot-scope="scope">
        <div class="table-display">
          <div class="display-list" @click="compileMet(0, scope)">编辑</div>
          <div class="display-list" @click="compileMet(1, scope)">删除</div>
        </div>
      </template>
    </a-table>

    <!--新增-->
    <div class="add" ref="add">
      <a-modal
        :getContainer="() => $refs.add"
        v-model="addVisible"
        :title="addIndex == 0 ? '新增' : '编辑'"
        width="50%"
      >
        <div class="add-block">
          <div class="list">
            <div class="left">描述：</div>
            <a-input v-model="form.desc" clearable />
          </div>

          <div class="list">
            <div class="left">类型：</div>
            <a-input v-model="form.type" clearable />
          </div>

          <div class="list">
            <div class="left">Html：</div>
            <a-input readonly class="input" v-model="form.html" clearable />

            <!-- <el-upload
              action="https://ir3.anbio.xyzcommon/upload"
              :on-change="handleChangeHtml"
              :file-list="fileListHtml"
              :show-file-list="false"
              class="right"
            >
              <div>点击上传</div>
            </el-upload> -->
          </div>

          <div class="list">
            <div class="left">pdf：</div>
            <a-input readonly class="input" v-model="form.pdf" clearable />
            <!-- <el-upload
              action="https://ir3.anbio.xyzcommon/upload"
              :on-change="handleChangePdf"
              :file-list="fileListPdf"
              class="right"
            >
              <div>点击上传</div>
            </el-upload> -->
          </div>

          <div class="list">
            <div class="left">Word：</div>
            <a-input readonly class="input" v-model="form.word" clearable />
            <!-- <el-upload
              action="https://ir3.anbio.xyzcommon/upload"
              :on-change="handleChangeWord"
              :file-list="fileListWord"
              class="right"
            >
              <div>点击上传</div>
            </el-upload> -->
          </div>

          <div class="list">
            <div class="left">Xls：</div>
            <a-input readonly class="input" v-model="form.xls" clearable />
            <!-- <el-upload
              action="https://ir3.anbio.xyzcommon/upload"
              :on-change="handleChangeXls"
              :file-list="fileListXls"
              class="right"
            >
              <div>点击上传</div>
            </el-upload> -->
          </div>

          <div class="list">
            <div class="left">Zip：</div>
            <a-input readonly class="input" v-model="form.zip" clearable />
            <!-- <el-upload
              action="https://ir3.anbio.xyzcommon/upload"
              :on-change="handleChangeZip"
              :file-list="fileListZip"
              class="right"
            >
              <div>点击上传</div>
            </el-upload> -->
          </div>
        </div>
        <div class="block-display">
          <div
            class="block-display-list"
            v-for="(item, index) in 2"
            :key="index"
            @click="buttonMet(index)"
          >
            {{ index == 0 ? "取消" : "确定" }}
          </div>
        </div>
      </a-modal>
    </div>
  </div>
</template>

<script>
// import { VueEditor } from "vue2-editor";

import { quillEditor } from "vue-quill-editor";
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
import axios from "axios";

import moment from "moment";

import {
  managerSecGet,
  managerSecPost,
  managerSecDelete,
} from "../../api/common";

export default {
  components: {
    quillEditor,
  },
  data() {
    this.dateFormat = "YYYY-MM-DD";
    return {
      addVisible: false,
      addIndex: 0,
      //----------
      artcieTitle: "",
      // 数据
      columns: [
        {
          title: "描述",
          scopedSlots: { customRender: "name" },
          width: "70%",
        },

        {
          title: "类型",
          scopedSlots: { customRender: "type" },
          width: 200,
        },
        {
          title: "时间",
          scopedSlots: { customRender: "time" },
          width: 300,
        },
        {
          title: "操作",
          scopedSlots: { customRender: "operation" },
          width: 300,
        },
      ],
      dataSource: [],
      page: 1,
      limit: 10,

      pagination: {
        total: 10,
        current: 1,
        pageSize: 10,
        pageSizeOptions: ["10", "20", "50", "100"],
        showTotal: (total) => `总共 ${total} 条`,
      },
      form: {
        id: "",
        name: "",
        time: undefined,
        desc: "",
        type: "",
        //----------------
        html: "",
        pdf: "",
        word: "",
        xls: "",
        zip: "",
      },
      //上传图片
      fileListHtml: [],
      fileListPdf: [],
      fileListWord: [],
      fileListXls: [],
      fileListZip: [],
    };
  },

  created() {
    // 请求文章列表
    this.secMet();
  },
  methods: {
    moment,
    // 请求文章列表
    secMet() {
      let params = {
        pageSize: this.limit,
        pageNo: this.page,
        //-------
        primaryDocDescription: "",
        filingType: "",
        description: this.artcieTitle,
      };

      managerSecGet(params).then((res) => {
        if (res.resultStatus == true) {
          this.dataSource = res.resultData.secList;
          this.pagination.total = res.resultData.totalNum;
        }
      });
    },

    // 用户点击新增
    addMet() {
      this.addIndex = 0;
      this.form.id = "";
      this.form.name = "";
      this.form.time = undefined;
      this.form.text = "";
      this.form.desc = "";
      this.form.type = "";

      this.form.html = "";
      this.form.pdf = "";
      this.form.word = "";
      this.form.xls = "";
      this.form.zip = "";

      this.addVisible = true;
    },
    // 操作区域
    compileMet(index, item) {
      if (index == 0) {
        this.addIndex = 1;

        this.form.id = "";
        this.form.name = "";
        this.form.time = undefined;
        this.form.desc = "";
        this.form.type = "";
        //------------
        this.form.html = "";
        this.form.pdf = "";
        this.form.word = "";
        this.form.xls = "";
        this.form.zip = "";
        this.essayDetailGetMet(item);
      } else if (index == 1) {
        this.deleteMet(item.id);
      } else {
      }
    },
    // 详情
    essayDetailGetMet(item) {
      this.form.id = item.id;
      this.form.desc = item.description;
      this.form.type = item.filingType;
      this.form.html = item.filingHtmlPath;
      this.form.pdf = item.filingPdfPath;
      this.form.word = item.filingWordPath;
      this.form.xls = item.filingExcelPath;
      this.form.zip = item.filingLocalPath;

      this.addVisible = true;
    },
    // 弹出框 时间
    onChange(date, dateString) {
      this.form.time = dateString;
    },

    //弹出框 确认
    buttonMet(index) {
      if (index == 0) {
        this.addIndex = 0;
        this.form.name = "";
        this.form.time = undefined;
        this.form.text = "";
        this.addVisible = false;
      } else {
        this.essayPostMet(0);
      }
    },

    // 点击确定
    essayPostMet() {
      let params = {
        id: this.form.id,
        filingType: this.form.type,
        description: this.form.desc,
        primaryDocDescription: "",
      };

      managerSecPost(params).then((res) => {
        this.$message.success(
          `${this.addIndex == 0 ? "新增成功！" : "编辑成功！"}`
        );
        this.addVisible = false;
        this.secMet();
      });
    },

    // 删除
    deleteMet(id) {
      const params = id;

      managerSecDelete(params).then((res) => {
        if (res.resultStatus === true) {
          this.$message.success("删除成功");
          this.secMet();
        }
      });
    },

    // 选择图片 富文本上传图片
    handleImageAdded(file, Editor, cursorLocation, resetUploader) {
      let formData = new FormData();
      formData.append("file", file);

      axios({
        url: `https://anbio.xmw1688.com/common/upload`,
        method: "POST",
        data: formData,
      })
        .then((res) => {
          //这两行是关键代码了。在鼠标位置插入图片，数据存的是url
          let url = "https://oss-cdn.anbio.com" + res.data.resultData;

          Editor.insertEmbed(cursorLocation, "image", url);
          resetUploader();
        })
        .catch((err) => {
          console.log(err);
        });
    },

    handleTableChange(pagination) {
      this.page = pagination.current;
      this.limit = pagination.pageSize;

      this.pagination.current = pagination.current;
      this.pagination.pageSize = pagination.pageSize;
      this.secMet();
    },

    //-----------------
    onPickChange(e) {
      this.page = 1;
      this.limit = 10;

      this.secMet();
    },
    titleChange() {
      this.page = 1;
      this.limit = 10;

      this.secMet();
    },
    handleChangeHtml(file, fileList) {
      console.log("chufa", fileList);

      // this.form.html = '../../assets/img/background.a568162c.svg'

      this.fileListHtml = fileList.slice(-3);
    },
    handleChangePdf(file, fileList) {
      this.fileListPdf = fileList.slice(-3);
    },
    handleChangeWord(file, fileList) {
      this.fileListWord = fileList.slice(-3);
    },
    handleChangeXls(file, fileList) {
      this.fileListXls = fileList.slice(-3);
    },
    handleChangeZip(file, fileList) {
      this.fileListZip = fileList.slice(-3);
    },
  },
};
</script>

<style lang="less" scoped>
.article {
  .article-header {
    margin-top: 20px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .header {
      width: 100px;
      height: 35px;
      border: 1px solid;
      margin-right: 35px;
      cursor: pointer;
      background: #775dc0;
      border-radius: 5px;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #fff;
      font-weight: 500;
      font-size: 14px;
    }
  }

  .table-title {
    cursor: pointer;
  }

  .table-display {
    display: flex;

    .display-list {
      margin-right: 30px;
      cursor: pointer;
    }
  }

  .add {
    /deep/ .ant-modal-title {
      text-align: center;
      font-weight: bold;
      font-size: 15px;
      color: #fff;
    }

    /deep/ .ant-modal-header {
      padding: 0;
      height: 40px;
      background: #a6a6a6;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    /deep/ .ant-modal-close-x {
      width: 40px;
      height: 40px;
      line-height: 40px;
      font-size: 14px;
      margin-right: 10px;
      color: #fff;
    }

    /deep/ .ant-modal-body {
      background: #fff;
    }

    /deep/ .ant-modal-footer {
      display: none;
    }

    .add-block {
      margin: 0 auto;
      height: 100%;

      .list {
        display: flex;
        align-items: center;
        margin-bottom: 20px;
        height: 35px;

        /deep/ .ant-calendar-picker {
          width: 100%;
        }

        /deep/ .ant-input {
          width: 91%;
          height: 100%;
        }

        /deep/ .el-upload {
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
        }

        .left {
          width: 50px;
          height: 100%;
          text-align: right;
          display: flex;
          align-items: center;
        }

        // .input {
        //   width: 76%;
        // }
        .right {
          padding: 0 10px;
          box-sizing: border-box;
          border: 1px solid #ccc;
          height: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-left: 12px;
          border-radius: 4px;
          font-size: 12px;
          cursor: pointer;
          width: 100px;
        }

        .right:hover {
          background: #775dc0;
          color: #fff;
        }
      }
    }

    .block-display {
      display: flex;
      justify-content: space-around;
      margin-top: 40px;

      .block-display-list {
        width: 100px;
        height: 35px;
        border: 1px solid;
        margin-right: 25px;
        cursor: pointer;
        background: #775dc0;
        border-radius: 5px;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #fff;
        font-weight: 500;
        font-size: 14px;
      }

      .block-display-list:last-child {
        margin-right: 0;
      }
    }
  }
}
</style>
